<template>
    <div class="member-list">
        <nav-header>
            <template slot="menuBefore">
                <li>
                <router-link to="/user/org/organization">组织架构管理</router-link>
                </li>
                <li class="gap">&gt;</li>
                <li v-text="schName" @click="back(-2)" style="cursor: pointer;"></li>
                <li class="gap">&gt;</li>
                <li v-text="gradeName" @click="back(-1)" style="cursor: pointer;"></li>
                <li class="gap">&gt;</li>
            </template>
            <li v-text="className"></li>
            <template slot="menuBefore">
                <div class="th-title-icon">
                    <el-button
                        @click="fieldsTips = true"
                        icon="el-icon-warning"
                        circle title="提示" size="mini" >
                    </el-button>
                </div>
            </template>
        </nav-header>
        <div class="zh-table">
			<div class="zh-table-contents"
				v-loading="loading.status"
				:element-loading-text="loading.txt"	
			>
				<template>
				  	<el-table
				  	border
				    ref="multipleTable"
				    :data="listData"
				    tooltip-effect="dark"
				    max-height="541"
				    style="width: 100%"
				  >
					    <el-table-column
					      type="index"
					      label="序号"
					      align="center"
					      show-overflow-tooltip
					      width="50"
					      >
					    </el-table-column>
					    <el-table-column
					      label="用户名"
					      prop="name"
					      show-overflow-tooltip
                           align="center"
					      width="">
					    </el-table-column>
					    <el-table-column
					      label="帐号"
					      prop="number"
					      show-overflow-tooltip
                           align="center"
					      width="">
					    </el-table-column>
					    <el-table-column
					      label="性别"
					      prop="sex_name"
					      show-overflow-tooltip
                           align="center"
					      width="">
					      
					    </el-table-column>
					    <el-table-column
					      label="角色"
					      prop="role_name"
					      show-overflow-tooltip
                           align="center"
					      width="">
					    </el-table-column>
					    <el-table-column
					      label="邮箱"
					      prop="email"
					      show-overflow-tooltip
                           align="center"
					      width="">
					    </el-table-column>
				  	</el-table>
				  	<div class="table-pagination" v-show="total_number > 10">
					  <el-pagination
						    @size-change="handleSizeChange"
						    @current-change="handleCurrentChange"
						    :current-page="listParam.page"
						    :page-sizes="[10, 20, 30, 40, 50, 100]"
						    :page-size="listParam.size"
						    layout="total, sizes, prev, pager, next, jumper"
						    :total="total_number">
						</el-pagination>
					</div>
				</template>
			</div>
		</div>
        <el-dialog
            title="提示"
            :visible.sync="fieldsTips"
            :close-on-click-modal="false" 
            :close-on-press-escape="false"
            width="30%"
        >
            <ul>
                <li> 班级成员管理、岗位设置、课程表设置、班级资料</li>
                <li>请到班级管理模块进行设置</li>
            </ul>
            <div slot="footer" class="dialog-footer"></div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            schName: this.$route.query.schName,
            gradeName: this.$route.query.gradeName,
            className: this.$route.query.className,
            loading:{
				status:false,
					xt:'获取数据...',
            },
            listParam:{
				status:[1,3],
				org_id:this.$route.query.id,
				page:1,
				size:10,
				data_type:2
	        },
            listData: [],
            total_number: 0,
            fieldsTips: false,
        }
    },
    created() {
        this.getList()
    },
    methods: {
        back(link) {
            this.$router.go(link)
        },
        getList(){
		    this.loading.status = true;
		    // 重写成功回调
			let success = ( data => {
				this.loading.status =  false
				this.listData = data.data.data;
                this.total_number = data.data.data_sum;
            
			});
			let fail = ( data => {
				this.loading.status = false;
				this.$message.error(data.msg)
			})
  			this.$ajax.get('api/user/user',{params:this.listParam,func:{success:success}})
        },
         handleSizeChange(val) {
		    	this.listParam.page = 1;
		    	this.listParam.size = val;
		    	this.getList();
		    },
		    handleCurrentChange(val) {
		    	this.listParam.page = val;
		    	this.getList();
		    },
    }
}
</script>
<style lang="scss">
.member-list {
    .th-title-icon {
        position: absolute;
        top: 0;
        right: 40px;
    }
}
</style>


